<template>
	<div>
		<div class="search">
			<div class="search_in" @click="gosearch">
				<div>
					<img src="../../assets/search.png" alt="">
					<input type="text" v-model="dataList.content" placeholder="请输入您需要搜索的关键词">
				</div>
				<button @click="commit">搜索</button>
			</div>
			<div class="select">
				<li v-for="(tab,i) in dataList.tabList" :class="{active:i == dataList.tabindex}" @click="selectTab(i,tab.type)">
					{{tab.name}}
				</li>
			</div>
		</div>
		<div class="contentBox" v-if="dataList.list.length">
			<div v-if="dataList.tabType == 'new'" class="newsBox" >
				<div class="newsBox_item" v-for="(n,i) in dataList.list" @click="goNews(n.newUuid)">
					<p>{{n.newTitle}}</p>
					<p>{{n.createdTime.slice(0,10)}}</p>
				</div>
			</div>
			<div v-if="dataList.tabType == 'bulletin'" class="newsBox">
				<div class="newsBox_item" v-for="(b,i) in dataList.list">
					<p>{{b.bulletinContent}}</p>
					<p>{{b.createdTime.slice(0,10)}}</p>
				</div>
			</div>
			<div v-if="dataList.tabType == 'video'" class="classroom_box">
				<div @click="goDetail(v.classUuid)" class="classroom" v-for="(v,index) in dataList.list">
					<img :src="v.coverImage" alt="">
					<p class="snp1">{{v.className}}</p>
					<li>
						<span>主讲人：{{v.classManager}}</span>
						<span>{{v.classStatus}}人学习</span>
					</li>
				</div>
<!-- 				<div class="classroom" v-for="(v,index) in 6">
					<img src="../../assets/goods.png" alt="">
					<p class="snp1">12313</p>
					<li>
						<span>主讲人：王尼玛</span>
						<span>5人学习</span>
					</li>
				</div> -->
			</div>
		</div>
		<div class="contentBox" v-if="!dataList.list.length">
			<div class="errorIcon" style="margin-top: 30px;">
				<img src="../../assets/error.png" alt="">
				<p>暂无数据</p>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		searchByType 
	} from "../../api/home.js";
	import {
		reactive,
		onBeforeMount
	} from 'vue';
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter()
	const dataList = reactive({
		tabindex:0,
		tabType:'new',
		content:'',
		tabList:[
			{
				name:'新闻资讯',
				type:'new'
			},
			{
				name:'通知公告',
				type:'bulletin'
			},
			{
				name:'三农课堂',
				type:'video'
			}
		],
		list:[]
	})
	
	const selectTab = (idx,type) => {
		dataList.list = []
		dataList.tabindex = idx
		dataList.tabType = type
	}
	const commit = () => {
		var data = {
			page: {
				pageSize: 99
			},
			params: {
				content: dataList.content,
				searchType:dataList.tabType
			}
		}
		searchByType(data).then(res=> {
			console.log(res,"4564654")
			if(res.data.list){
				dataList.list = res.data.list
			}else{
				dataList.list = []
			}
			
		})
	}
	const goDetail = (id)=> {
		router.push({
			path:'/classDetail',
			query:{id}
		})
	}
	const goNews = (id)=> {
		router.push({
			path:'/newsDetail',
			query:{id:id}
		})
	}
</script>

<style lang="scss" scoped>
	.search{
		width: 1200px;
		// height: 81px;
		background: #FFFFFF;
		border-radius: 10px 10px 10px 10px;
		margin: 20px auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		.search_in {
			width: 1140px;
			height: 51px;
			background: #FFFFFF;
			border-radius: 10px 10px 10px 10px;
			border: 1px solid rgba(17,145,142,0.5);
			display: flex;
			align-items: center;
			justify-content: space-between;
			cursor: pointer;
			margin: 15px 0;
			div{
				width: 1020px;
				height: 49px;
				display: flex;
				align-items: center;
				img{
					width: 31px;
					height: 31px;
					margin: 0 20px;
				}
				input{
					border: none;
					width: 930px;
					height: 100%;
					outline: none;
				}
			}
			button{
				width: 120px;
				height: 51px;
				background: #11918E;
				border-radius: 10px 10px 10px 10px;
				font-size: 20px;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
		.select{
			display: flex;
			justify-content: space-between;
			width: 60%;
			li{
				font-size: 18px;
				font-weight: 400;
				color: #333333;
				padding-bottom: 10px;
				border-bottom: 2px solid #FFFFFF;
			}
			.active{
				color: #11918E!important;
				border-bottom: 2px solid #11918E!important;
			}
		}
	}
	.contentBox{
		width: 1200px;
		min-height: 50vh;
		    margin: 30px auto;
		    background-color: #fff;
		    border-radius: 10px;
		    padding: 30px;
		.classroom_box{
			
			display: flex;
			flex-wrap: wrap;
			.classroom{
				width: 262px;
				height: 264px;
				background: #FFFFFF;
				overflow: hidden;
				border-radius: 10px;
				border: 1px solid rgba(17,145,142,0.1);
				margin-top: 30px;
				margin-right: 30px;
				img{
					width: 262px;
					height: 174px;
				}
				p{
					width: 230px;
					margin: 15px;
				}
				li{
					width: 230px;
					margin: 15px;	
					display: flex;
					justify-content: space-between;
				}
			}
			.classroom:nth-of-type(4n+0) {margin-right: 0;}
			.isuser{
				width: 282px;
				height: 276px;
				margin-right: 30px;
				background: #FFFFFF;
				border-radius: 10px;
				border: 1px solid rgba(17,145,142,0.1);
				margin-top: 30px;
				img{
					width: 280px;
					height: 186px;
				}
				p{
					width: 230px;
					margin: 15px;
				}
				li{
					width: 230px;
					margin: 15px;	
					display: flex;
					justify-content: space-between;
				}
			}
			.isuser:nth-of-type(3n+0) {margin-right: 0;}
		}
		.newsBox{
			display: flex;
			flex-direction: column;
			.newsBox_item{
				display: flex;
				justify-content: space-between;
				padding: 15px 0;
				border-bottom: 1px solid rgba(17,145,142,0.1);
				p:first-child{
					font-size: 16px;
					font-weight: 400;
					color: #333333;
				}
				p:last-child{
					font-size: 16px;
					font-weight: 400;
					color: #666666;
				}
			}
		}
	}
	
	
</style>